<script setup>
// App.vue作为根组件，包含路由出口
import { computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { initAuth } from "./utils/auth";
import { useUserStore } from "./stores/userStore";
import { showFailToast, showNotify, setToastDefaultOptions } from "vant";
// 导入静态资源
import logoImg from "./assets/logo.png";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

// 判断当前路由是否需要缓存
const isKeepAlive = computed(() => route.meta.keepAlive);

// 确保身份验证状态在应用启动时被初始化，并传入router实例
onMounted(() => {
  // 初始化身份认证状态
  initAuth(router);

  // 初始化用户Store数据
  userStore.initUserData();

  // 配置Toast默认选项
  setToastDefaultOptions({
    duration: 2000,
    position: "bottom",
  });

  // 处理网络状态
  window.addEventListener("online", () => {
    showNotify({
      type: "success",
      message: "网络已恢复",
    });
  });

  window.addEventListener("offline", () => {
    showFailToast("网络连接已断开");
  });

  // 预加载图片资源已通过import引入
});

// 不再需要预加载函数
</script>

<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <keep-alive v-if="isKeepAlive">
          <component :is="Component" />
        </keep-alive>
        <component v-else :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<style>
/* 全局样式 */
:root {
  --primary-color: #1989fa;
  --success-color: #07c160;
  --warning-color: #ff976a;
  --danger-color: #ee0a24;
  --text-color: #323233;
  --text-color-secondary: #666;
  --text-color-light: #999;
  --border-color: #ebedf0;
  --background-color: #f7f8fa;

  /* 动态计算安全区域 */
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB",
    "Microsoft Yahei", sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 淡入上移效果 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

/* 安全区域适配 */
.safe-area-inset-bottom {
  padding-bottom: calc(8px + var(--safe-area-inset-bottom));
}

.safe-area-inset-top {
  padding-top: calc(8px + var(--safe-area-inset-top));
}
</style>
